<template>
    <TabGrayEasyCard :title="'品牌情况'" :isMore="false" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="`单位：${card.unitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
        <slot>
            <el-table :data="card.tableData" height="100%">
                <el-table-column prop="ppcname" label="品牌" :align="'left'" />
                <el-table-column :label="tableLabel02" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.saleDay) }}
                    </template>
                </el-table-column>
                <el-table-column :label="tableLabel03" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.avgSale) }}
                    </template>
                </el-table-column>
                <el-table-column :label="tableLabel04" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.saleYoy }}
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import dashBoardApi from '@/api/JointVenture/dashBoard'
import { ref, reactive, watch, computed } from 'vue'
// import { reportLog } from '@/utils/reportLog'

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    projectZylyCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '按日', value: '日' }, { label: '按月', value: '月' }, { label: '按年', value: '年' }],
        curTab: '日',
        tabRight: '',
        // grayCardList: [],
        unitText: '',
        updateText: '',
        tableData: [],
        // startDate: '',
        // endDate: '',
    }
)

const getChartData = () => {
    dashBoardApi.saleroomBrandSituationApi({ projectZylyCode: props.projectZylyCode, dimTime: card.curTab, dataTime: props.updateDate }).then((res) => {
        if (res.data.code == 200 && res.data.data.length > 0) {
            card.tabRight = res.data.data[0].timeLab
            card.unitText = res.data.data[0].valueUnit
            card.tableData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}

// const goDetail = (permi) => {
//     reportLog({
//         type: 4,
//         resourceKey: permi,
//     })
// }
const changeTab = (value) => {
    // 切换tab，更换开始和结束日期
    // 按天：开始和结束日期，均为【数据更新日期】
    // 按月：开始日期为【数据更新日期】当月第一天，结束日期为【数据更新日期】
    // 按年：开始日期为【数据更新日期】当年第一天，结束日期为【数据更新日期】
    if(value == '日') {
        tableLabel02.value = '销售'
        tableLabel03.value = '同比上周'
        tableLabel04.value = '同比上月'
    }
    if(value == '月') {
        tableLabel02.value = '累计销售'
        tableLabel03.value = '日均销售'
        tableLabel04.value = '同比上月'
    }
    if(value == '年') {
        tableLabel02.value = '累计销售'
        tableLabel03.value = '日均销售'
        tableLabel04.value = '较整体日均'
    }
    card.curTab = value
    getChartData()
}
let tableLabel02 = ref('销售')
let tableLabel03 = ref('同比上周')
let tableLabel04 = ref('同比上月')

getChartData()

const projectZylyCode = computed(() => {
    return props.projectZylyCode
});
watch(projectZylyCode, () => {
    getChartData()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
